<body>
    <section class="versions">
        <h1>版本号</h1>
        <div class="wrap current">
            <div class="liteloader">
                <h2>LiteLoader</h2>
                <p class="secondary-text"></p>
            </div>
            <hr class="vertical-dividing-line" />
            <div class="qqnt">
                <h2>QQNT</h2>
                <p class="secondary-text"></p>
            </div>
            <hr class="vertical-dividing-line" />
            <div class="chromium">
                <h2>Chromium</h2>
                <p class="secondary-text"></p>
            </div>
            <hr class="vertical-dividing-line" />
            <div class="electron">
                <h2>Electron</h2>
                <p class="secondary-text"></p>
            </div>
            <hr class="vertical-dividing-line" />
            <div class="nodejs">
                <h2>Node.js</h2>
                <p class="secondary-text"></p>
            </div>
        </div>
        <div class="wrap new">
            <div class="vertical-list-item">
                <h2>正在发现 LiteLoaderQQNT 是否有新版本</h2>
                <button class="q-button q-button--small q-button--secondary">你先别急</button>
            </div>
        </div>
    </section>
    <section class="path">
        <h1>数据目录</h1>
        <div class="wrap">
            <div class="vertical-list-item">
                <h2>修改LiteLoader数据目录</h2>
                <div class="ops-btns">
                    <button class="q-button q-button--small q-button--secondary pick-dir">选择目录</button>
                    <button class="q-button q-button--small q-button--secondary open-dir">打开目录</button>
                </div>
            </div>
            <hr class="horizontal-dividing-line" />
            <div class="vertical-list-item">
                <input class="path-input text_color" type="text" spellcheck="false">
                <div class="ops-btns">
                    <button class="q-button q-button--small q-button--secondary reset">恢复默认</button>
                    <button class="q-button q-button--small q-button--secondary apply">立即应用</button>
                </div>
                <div class="modal-window hidden">
                    <div class="modal-dialog">
                        <header>
                            <h2>修改LiteLoader数据目录</h2>
                        </header>
                        <hr class="horizontal-dividing-line" />
                        <main>
                            <div class="first">
                                <p>海内存知己，天涯若比邻。请稍等……</p>
                                <p>花费的时间可能会比预期稍长，但我们将会尽快完成。</p>
                                <p>你的QQNT将重新启动一次，请坐和放宽，马上就好。</p>
                            </div>
                            <div class="second hidden">
                                <p>好东西就要来了！</p>
                                <p>你正在成功！你已完成100%。</p>
                                <p>您和您的QQNT即将重新启动。</p>
                            </div>
                        </main>
                        <hr class="horizontal-dividing-line" />
                        <footer>
                            <i class="q-icon q-icon-animate">
                                <img class="q-icon-animate-content" src="appicon://kit-icons/LoadingBlack.png">
                            </i>
                        </footer>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="plugins">
        <h1>插件列表</h1>
        <div class="wrap extension">
            <div class="vertical-list-item title">
                <h2>扩展</h2>
                <svg class="icon is-fold" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21 8L12 17L3 8" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"></path>
                </svg>
            </div>
            <ul class="hidden"></ul>
        </div>
        <div class="wrap theme">
            <div class="vertical-list-item title">
                <h2>主题</h2>
                <svg class="icon is-fold" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21 8L12 17L3 8" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"></path>
                </svg>
            </div>
            <ul class="hidden"></ul>
        </div>
        <div class="wrap framework">
            <div class="vertical-list-item title">
                <h2>依赖</h2>
                <svg class="icon is-fold" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21 8L12 17L3 8" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"></path>
                </svg>
            </div>
            <ul class="hidden"></ul>
        </div>
        <div class="wrap core">
            <div class="vertical-list-item title">
                <h2>核心</h2>
                <svg class="icon is-fold" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21 8L12 17L3 8" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"></path>
                </svg>
            </div>
            <ul class="hidden"></ul>
        </div>
    </section>
    <section class="about">
        <h1>关于</h1>
        <div class="wrap">
            <div class="vertical-list-item">
                <div>
                    <h2>LiteLoaderQQNT</h2>
                    <p class="secondary-text">LiteLoaderQQNT 是 QQNT 的插件加载器，一般在 QQNT 的环境内简称为 LiteLoader。</p>
                    <p class="secondary-text">它可以让你自由地为 QQNT 添加各种插件，并实现例如美化主题、增加功能等各种功能。</p>
                </div>
            </div>
            <hr class="horizontal-dividing-line" />
            <div class="vertical-list-item">
                <div>
                    <h2>开源协议</h2>
                    <p class="secondary-text">MIT License</p>
                </div>
            </div>
        </div>
        <div class="wrap">
            <div class="vertical-list-item">
                <div>
                    <h2>LiteLoaderQQNT 官网</h2>
                    <p class="secondary-text">https://llqqnt.mukapp.top | 感谢 MUK 提供官网</p>
                </div>
                <button class="q-button q-button--small q-button--secondary liteloaderqqnt" value="https://llqqnt.mukapp.top">进去瞅瞅</button>
            </div>
            <hr class="horizontal-dividing-line" />
            <div class="vertical-list-item">
                <div>
                    <h2>GitHub 仓库</h2>
                    <p class="secondary-text">https://github.com/LiteLoaderQQNT/LiteLoaderQQNT</p>
                </div>
                <button class="q-button q-button--small q-button--secondary github" value="https://github.com/LiteLoaderQQNT/LiteLoaderQQNT">进去瞅瞅</button>
            </div>
            <hr class="horizontal-dividing-line" />
            <div class="vertical-list-item">
                <div>
                    <h2>Telegram 群组</h2>
                    <p class="secondary-text">https://t.me/LiteLoaderQQNT</p>
                </div>
                <button class="q-button q-button--small q-button--secondary telegram" value="tg://resolve?domain=LiteLoaderQQNT/">进去瞅瞅</button>
            </div>
        </div>
        <div class="wrap">
            <div class="vertical-list-item">
                <h2 class="hitokoto_text">正在加载：Hitokoto - 一言</h2>
                <div></div>
            </div>
            <hr class="horizontal-dividing-line" />
            <div class="vertical-list-item">
                <div></div>
                <div class="secondary-text">
                    <span>——</span>
                    <span class="hitokoto_author">LiteLoaderQQNT</span>
                </div>
            </div>
        </div>
    </section>
</body>